<template>
    <div class="phone">
      <div class="phone-content">
        <div class="content__input">
          <img src="@/components/image/phone/icon-phone@2x.png" class="input-icon" />
          <input v-model="phone" type="text" placeholder="输入手机号" />
        </div>
        <div class="content__input2">
          <img src="@/components/image/phone/icon-yzm@2x.png" class="input-icon" />
          <input v-model="code" type="text" placeholder="输入验证码" />
          <van-button :disabled="buttonText !== '获取验证码' || !checkPhone" class="small-button" type="info" size="small"
            @click="openDragVerify">
            {{ buttonText }}
          </van-button>
        </div>
        <van-button :disabled="!canLogin" class="login" type="info" size="large" @click="bindPhone">
          绑定
        </van-button>
      </div>
    </div>
  </template>
  <script>
import { Button, Toast } from "vant";
import request from "@/components/base";

export default {
  name: "Phone",
  components: {
    "van-button": Button
  },
  props: {
    phone: {
      type: String,
      default: ""
    },
    openId: {
      type: String,
      default: ""
    },
    captchaVerification: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      countDown: 0,
      code: "",
      timer: null,
    };
  },
  computed: {
    buttonText() {
      return this.countDown > 0 ? `重新发送(${this.countDown.toString().padStart(2, '0')})` : "获取验证码";
    },
    canLogin() {
      return Boolean(this.code && this.phone && this.checkPhone);
    },
    checkPhone() {
      return /^[1][0-9]{10}$/.test(this.phone);
    }
  },
  watch: {
    captchaVerification: {
      immediate: true,
      handler(value) {
        if (value) {
          this.getCode();
        }
      }
    }
  },
  methods: {
    close() {
      this.$emit("close", "phone");
    },
    openDragVerify() {
      this.$emit("setdialogType", "dragVerify", { phone: this.phone });
    },
    async getCode() {
      const result = await request.getCaptcha(this.phone, this.captchaVerification);
      if (!result.code) {
        this.countDown = 60;
        this.timer = setInterval(() => {
          this.countDown -= 1;
          if (this.countDown === 0) {
            clearInterval(this.timer);
          }
        }, 1000);
      } else {
        Toast.fail({ message: result.message });
      }
    },
    async bindPhone() {
      const result = await request.userBindPhone({
        openId: this.openId,
        phone: this.phone,
        captcha: this.code
      });
      if (!result.code) {
        Toast("绑定成功");
        localStorage.setItem("token", result.data.token)
        localStorage.setItem("UserInfo", JSON.stringify(result.data))
        setTimeout(() => {
          sessionStorage.setItem(
            "token_openId",
            `${result.data.token}^_^${result.data.openId}`
          );
          this.$router.replace({ path: "/map" });
        }, 1000);
      } else {
        this.code = "";
        Toast.fail({ message: result.message });
      }
    },
    beforeDestroy() {
      if (this.timer) clearInterval(this.timer);
    },
    verifier(value) {
      return Boolean(value && /^[1][0-9][0-9]{9}$/.test(value));
    }
  }
};
</script>
  <style lang="less" scoped>
  .phone {
    width: 100%;
    height: 100%;
    animation: show 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
  
    .phone-content {
      width: 5.4rem;
      height: 3.66rem;
      background: white;
      border-radius: 0.06rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  
      .content__input,
      .content__input2 {
        display: flex;
        align-items: center;
        width: 4.89rem;
        height: 0.7rem;
        border-bottom: 1px solid #eeeeee;
  
        .input-icon {
          width: 0.25rem;
          height: 0.39rem;
          margin-left: 0.08rem;
        }
  
        input {
          border: none;
          outline: none;
          font-size: 0.28rem;
          flex: 1;
          margin-left: 0.38rem;
  
          &::placeholder {
            color: #999999;
          }
        }
      }
  
      .content__input2 {
        margin-top: 0.42rem;
  
        .input-icon {
          width: 0.29rem;
          height: 0.35rem;
          margin-left: 0.06rem;
        }
  
        input {
          margin-left: 0.37rem;
          width: 1.64rem;
        }
  
        .small-button {
          width: 1.8rem;
        }
      }
  
      .login {
        width: 4.87rem;
        height: 0.7rem;
        font-size: 0.32rem;
        line-height: 1;
        border-radius: 0.1rem;
        margin-top: 0.38rem;
      }
    }
  }
  
  @keyframes show {
    from {
      transform: scale(0);
    }
  
    to {
      transform: scale(1);
    }
  }
  </style>
  